<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="./../../../template/OutletTTATemplate.xhtml">

    <ui:define name="contentInsert">
        <script type="text/javascript">
       var chartStyle = {
       padding:20,
       legend: {
           display:"right"
           ,spacing:4
           }
       };
        
        </script>
        <h3><h:outputText value="Sales" /></h3>
        <br/>


        <h:form id="salesChartFrom">
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="2">
                    <h:outputText value="Select Time range: " style="font-weight: bold; font-size: medium; font-family: Arial"/>
                    <p:ajaxStatus style="width:20px;height:20px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>

                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
                <h:panelGrid columns="6">
                    <h:selectOneMenu id="salesYearStart" value="#{ompipSalesMB.salesYearStart}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{ompipSalesMB.startYears}" />

                        <p:ajax update="salesMonthStart"   
                                listener="#{ompipSalesMB.handleStartYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="salesMonthStart" value="#{ompipSalesMB.salesMonthStart}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{ompipSalesMB.startMonths}" /> 
                    </h:selectOneMenu>
                    <h:outputText value="-----TO-----" style="text-align: center"/>
                    <h:selectOneMenu id="salesYearEnd" value="#{ompipSalesMB.salesYearEnd}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>

                        <f:selectItems value="#{ompipSalesMB.endYears}" />
                        <p:ajax update="salesMonthEnd"   
                                listener="#{ompipSalesMB.handleEndYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="salesMonthEnd" value="#{ompipSalesMB.salesMonthEnd}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{ompipSalesMB.endMonths}" />
                    </h:selectOneMenu>
                    <p:commandButton value="Update" actionListener="#{ompipSalesMB.updateStartEnd}"
                                     update="salesChartFrom"/>
                </h:panelGrid>

            </p:panel>
            <p:lineChart id="salesChart" model="#{ompipSalesMB.salesModel}"
                         titleX="Month" titleY="Sales" width="700px" height="400px"/>


            <br/>
            <c:if test="#{checkBIPaymentMB.checkIsPaid()}">
            <h3><h:outputText value="Sales With Prediction" /></h3>
            <br/>
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="3">
                    <h:outputText value="Predict using historical months since"/>

                    <h:selectOneMenu value="#{ompipSalesMB.numHistoricalMonths}">
                        <f:selectItem itemLabel="3 months ago" itemValue="3"/>
                        <f:selectItem itemLabel="6 months ago" itemValue="6"/>
                        <f:selectItem itemLabel="1 year ago" itemValue="12"/>
                        <f:selectItem itemLabel="18 months ago" itemValue="18"/>
                        <f:selectItem itemLabel="2 year ago" itemValue="24"/>
                        <f:selectItem itemLabel="3 year ago" itemValue="36"/>
                        <f:selectItem itemLabel="The beginning of time" itemValue="100"/>
                    </h:selectOneMenu>

                    <h:outputText/>
                    <h:outputText value="Enter number of months to predict"/>
                    <h:inputText value="#{ompipSalesMB.numMonthToPred}"/>
                    <p:commandButton value="Update" actionListener="#{ompipSalesMB.updatePrediction()}"
                                     update="salesPredChart,saleCorCoef"/>
                </h:panelGrid>
                <h:panelGrid columns="2">
                    <h:outputText value="Correlation Coefficient:"/>
                    <h:outputText id="saleCorCoef" value="#{ompipSalesMB.saleCorCoefStr}"/>
                </h:panelGrid>
            </p:panel>
            <p:lineChart id="salesPredChart"
                         model="#{ompipSalesMB.salesWithPredModel}"  
                         titleX="Month" titleY="Sales" width="700px" height="400px" >
            </p:lineChart>  
            </c:if>
        </h:form>

        <h3><h:outputText value="Reservations" /></h3>
        <br/>
        <h:form>
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="2">
                    <h:outputText value="Select Time range: "/>
                    <p:ajaxStatus style="width:20px;height:20px;">
                        <f:facet name="start">

                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
                <h:panelGrid columns="6">
                    <h:selectOneMenu id="rYearStart" value="#{ompipReservationMB.reservationsYearStart}">

                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{ompipReservationMB.startYears}" />
                        <p:ajax update="rMonthStart"   
                                listener="#{ompipReservationMB.handleStartYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="rMonthStart" value="#{ompipReservationMB.reservationsMonthStart}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{ompipReservationMB.startMonths}" /> 
                    </h:selectOneMenu>
                    <h:outputText value="------------TO------------" style="text-align: center"/>

                    <h:selectOneMenu id="rYearEnd" value="#{ompipReservationMB.reservationsYearEnd}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{ompipReservationMB.endYears}" />
                        <p:ajax update="rMonthEnd"   
                                listener="#{ompipReservationMB.handleEndYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="rMonthEnd" value="#{ompipReservationMB.reservationsMonthEnd}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{ompipReservationMB.endMonths}" />
                    </h:selectOneMenu>

                    <p:commandButton value="Update" actionListener="#{ompipReservationMB.updateStartEnd}"
                                     update="reservationsChart"/>
                </h:panelGrid>

            </p:panel>
            <p:lineChart id="reservationsChart"
                         model="#{ompipReservationMB.resModel}"
                         titleX="Month" titleY="Reservations" width="700px" height="400px" />

            <br/>
            <c:if test="#{checkBIPaymentMB.checkIsPaid()}">
            <h3><h:outputText value="Reservation With Prediction" /></h3>
            <br/>
            <p:panel style="background:whitesmoke">

                <h:panelGrid columns="3">
                    <h:outputText value="Predict using historical months since"/>
                    <h:selectOneMenu value="#{ompipReservationMB.numHistoricalMonths}">
                        <f:selectItem itemLabel="3 months ago" itemValue="3"/>
                        <f:selectItem itemLabel="6 months ago" itemValue="6"/>
                        <f:selectItem itemLabel="1 year ago" itemValue="12"/>
                        <f:selectItem itemLabel="18 months ago" itemValue="18"/>
                        <f:selectItem itemLabel="2 year ago" itemValue="24"/>
                        <f:selectItem itemLabel="3 year ago" itemValue="36"/>

                        <f:selectItem itemLabel="The beginning of time" itemValue="100"/>
                    </h:selectOneMenu>
                    <h:outputText/>
                    <h:outputText value="Enter number of months to predict"/>
                    <h:inputText value="#{ompipReservationMB.numMonthToPred}"/>
                    <p:commandButton value="Update" actionListener="#{ompipReservationMB.updatePrediction()}"
                                     update="reservationsPredChart,resCorCoef"/>
                    <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
                <h:panelGrid columns="2">
                    <h:outputText value="Correlation Coefficient:"/>
                    <h:outputText id="resCorCoef" value="#{ompipReservationMB.resCorCoefStr}"/>
                </h:panelGrid>
            </p:panel>
            <p:lineChart id="reservationsPredChart"
                         model="#{ompipReservationMB.resPredModel}"
                         titleX="Month" titleY="Reservations" width="700px" height="400px" />

            <br/>
            <h3><h:outputText value="Survey Result by Month" /></h3>
            <br/>
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="3">
                    <h:outputLabel for="month" value="Enter month from 1 to 12:"/>
                    <h:inputText required="true" requiredMessage="Month is requied!"
                                 id="month" value="#{surveyMB.month}"/>
                    <br/> <br/>

                    <h:outputLabel for="year" value="Enter year:"/>
                    <h:inputText required="true" requiredMessage="Year is requied!"
                                 id="year" value="#{surveyMB.year}"/>
                    <br/>
                    <p:commandButton value="Retrieve result" actionListener="#{surveyMB.updateNumMonthToPred}" update="retrieveResult"/>
                </h:panelGrid>
            </p:panel>
            <p:panel id="retrieveResult">
                <p:columnChart  value="#{surveyMB.getResult()}" var="survey" xfield="#{survey.question}"
                                style="chartStyle" titleX="Survey question" titleY="Result" width="700px" height="400px">
                    <p:chartSeries label="You" value="#{survey.outletResult}" />

                    <p:chartSeries label="Everyone" value="#{survey.overallResult}" />
                </p:columnChart>
                <h:outputText value ="No of Reviews for your outlet: #{surveyMB.noOfReviews}"/> 
            </p:panel>
            </c:if>
        </h:form>

    </ui:define>
</ui:composition>
